/**
 * 1. 初始条件
 */
Ext.define('Admin.view.waterOptimum.submodule.initialConditions',{
	extend:'Ext.panel.Panel',
	xtype:'woInitialConditions',
	//起别名
	alias:'woInitialConditions',
	require:[],
	user:[],
	userCLs:'big-100 small-100',
	layout: {
        type: 'hbox',
        align: 'stretch'
    },
	padding: '10 0 0 0',
	resultPack: null,
	items:[{
		xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
	    items: [{
			xtype: 'grid',
			border: true,
			localId: 'g1',
			margin: '0 10 10 10',
		    store: {xtype:'store'},
		    columns: [
		        { text: '水库', dataIndex: 'index1', width: '24%', minWidth: 100, align: 'center'},
		        { text: '初始水位', dataIndex: 'index2', width: '25%', minWidth: 100, align: 'center',
		            editor: {
		                xtype: 'textfield',
		                allowBlank: false
		            }},
		        { text: '期末水位', dataIndex: 'index3', width: '25%', minWidth: 100, align: 'center',
		            editor: {
		                xtype: 'textfield',
		                allowBlank: false
		            }},
		        { text: '蓄变量', dataIndex: 'index4', width: '25%', minWidth: 100, align: 'center'}
		    ],
		    plugins: [{
		        ptype: 'cellediting',
		        clicksToEdit: 1
		    }],
		    dockedItems: [{
		        xtype: 'toolbar',
		        dock: 'top',
		        height: 30,
		        items: [
		        //    {xtype: 'label', html: '►水库', style:"font-size:14px;margin-left:5px;font-weight:bold;"},
		        //    {xtype: 'label', html: ' | '},
		            {xtype: 'label', localId: 't1', html: '<span>水库</span>', style:"font-size:14px;margin-left:5px;cursor: pointer;font-weight:bold;"}
		        ]
		    }],
		    flex: 1
		},{
			xtype: 'grid', 
			border: true,
			margin: '0 10 10 10',
		    store: {xtype:'store'},
			localId: 'g3',
		    columns: [
		        { text: '时间', dataIndex: 'index1', width: '24%', minWidth: 100, align: 'center' },
		        { text: '初始水位', dataIndex: 'index2', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)' },
		        { text: '期末水位', dataIndex: 'index3', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)' },
		        { text: '蓄变量', dataIndex: 'index4', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)' }
		    ],
		    dockedItems: [{
			    xtype: 'toolbar',
			    dock: 'top',
			    height: 30,
			    items: [
			     	{xtype: 'label', localId: 't3', html: '历史信息', style:  "font-size:14px;margin-left:5px;font-weight:bold;"}
			    ]
		    }],
		    flex: 1
		}],
	    flex: 1
	},{
    	xtype: 'panel',
		layout: {
	        type: 'vbox',
	        align: 'stretch'
	    },
	    items: [{
			xtype: 'grid',
			border: true,
			localId: 'g2',
			margin: '0 10 10 10',
			store: {xtype:'store'},
		    columns: [
		    	{ text: '断面', dataIndex: 'index1', width: '24%', minWidth: 100, align: 'center' },
		        { text: '初始流量', dataIndex: 'index2', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)'  },
		        { text: '最小生态流量', dataIndex: 'index3', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)'  },
		        { text: '最大流量', dataIndex: 'index4', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)'  }
		    ],
		    dockedItems: [{
		        xtype: 'toolbar',
		        dock: 'top',
		        height: 30,
		        items: [
		            {xtype: 'label', localId: 't2', html: '<span>断面</span>', style:"font-size:14px;margin-left:5px;cursor: pointer;font-weight:bold;"}
		        //    {xtype: 'label', html: ' | '},
		        //    {xtype: 'label', html: '►断面', style:"font-size:14px;margin-left:5px;cursor: pointer;font-weight:bold;"}
		        ]
		    }],
		    flex: 1
		},{
			xtype: 'grid', 
			border: true,
			store: {xtype:'store'},
			localId: 'g4',
			margin: '0 10 10 10',
		    columns: [
		    	{ text: '时间', dataIndex: 'index1', width: '24%', minWidth: 100, align: 'center' },
		        { text: '初始流量', dataIndex: 'index2', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)' },
		        { text: '最小生态流量', dataIndex: 'index3', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)' },
		        { text: '最大流量', dataIndex: 'index4', width: '25%', minWidth: 100, align: 'center', formatter: 'round(3)' }
		    ],
		    dockedItems: [{
			    xtype: 'toolbar',
			    dock: 'top',
			    height: 30,
			    items: [
			     	{xtype: 'label', localId: 't4', html: '历史信息', style:  "font-size:14px;margin-left:5px;font-weight:bold;"}
			    ]
		    }],
		    flex: 1
		}],
	    flex: 1
    },{
			xtype: 'grid', 
			border: true,
			localId: 'g5',
			margin: '0 10 10 10',
			store: {xtype:'store'},
			columns: [
				{ text: '时间', dataIndex: 'index1', width: '49%', minWidth: 100, align: 'center' },
			    { text: '流量', dataIndex: 'index3', width: '50%', minWidth: 100, align: 'center', formatter: 'round(3)' }],
			dockedItems: [{
			    xtype: 'toolbar',
			    dock: 'top',
			    height: 30,
			    items: [
			     	{xtype: 'label', localId: 't5', html: '来水预报', style:  "font-size:14px;margin-left:5px;font-weight:bold;"}
			    ]
		    }],
		    flex: 1
	}],
	forecastStation:null,
	setResultPack: function(result){
		this.resultPack = result;		
		this.getGridStore('g1').setData(result.index1);
		this.getGrid('g1').getSelectionModel().select(0);	
		this.getGridStore('g2').setData(result.index2);
		this.getGrid('g2').getSelectionModel().select(0);
		var config = result.index3.index1;
		this.forecastStation = result.index3.index1;
		var head = new Array();
		head.push({
			text: '时间', dataIndex: 'index1', minWidth: 100, align: 'center'
		});
		for(var i=0;i<config.length;i++){
			head.push({ text: config[i], dataIndex: 'index'+(i+3), minWidth: 100, align: 'center', formatter: 'round(0)' });
		}
		this.getGrid('g5').reconfigure(null, head);
		this.getGridStore('g5').setData(result.index3.index2);
	},
	getGrid: function(vsid){
		return this.query('grid[localId='+vsid+']')[0];
	},
	getGridStore: function(vsid){
		return this.getGrid(vsid).getStore();
	},
	getGridData: function(vsid){
		var data = this.getGridStore(vsid);
		var recordArr = [];
		for(var i=0;i<data.getCount();i++){
			recordArr.push(data.getAt(i).getData());
		}
		var jsonArr = Ext.encode(recordArr);
		return jsonArr;
	},
	getGridDataAll: function(){
		var output = '{';
		output += '"index1":'+this.getGridData('g1')+', ';
		output += '"index2":'+this.getGridData('g2')+', ';
		
		var stationStr = '[';
		for(var i=0;i<this.forecastStation.length;i++){
			stationStr += '"'+this.forecastStation[i]+'"';
			if(i!=this.forecastStation.length-1)stationStr += ",";
		}
		stationStr +=']';
		output += '"index3":{"index1":'+stationStr+',"index2":'+this.getGridData('g5')+'}';
		
		output += '}';
	//	console.log(output);
		return output;
	},
	changeView: function(id){
		this.setActiveItem(id);
	},
	getToolbar: function(toolid){
		return this.query('label[localId='+toolid+']')[0];
	},
	displayData: function(result){
		this.setResultPack(result);
	},
	eventBind: function(){
		var panel = this;
		this.getGrid('g1').on({
			select:{
	        	fn: function(obj, record, index, eOpts){
	        		var index = this.getSelectionModel().getSelection();
					if(index.length > 0){
		            	panel.getToolbar('t3').setHtml("历史信息 [ "+index[0].get('index1')+" ]");
		            //	panel.getToolbar('t5').setHtml("来水预报 [ "+index[0].get('index1')+" ]");
		            	panel.getGridStore('g3').setData(index[0].get('index5'));
		            //	panel.getGridStore('g5').setData(index[0].get('index6'));	        			
	        		}
	            }
	        }
		});
		this.getGrid('g2').on({
			select:{
				fn: function(obj, record, index, eOpts){
					var index = this.getSelectionModel().getSelection();
					if(index.length > 0){
			            panel.getToolbar('t4').setHtml("历史信息 [ "+index[0].get('index1')+" ]");
		            //	panel.getToolbar('t6').setHtml("来水预报 [ "+index[0].get('index1')+" ]");
		            	panel.getGridStore('g4').setData(index[0].get('index5'));
		            //	panel.getGridStore('g6').setData(index[0].get('index6'));						
					}
	            }
			}
		});
		/*document.getElementById(this.getToolbar('t1').getId()).getElementsByTagName('span')[0].onclick=function(){
			panel.changeView(1);
		};
		document.getElementById(this.getToolbar('t2').getId()).getElementsByTagName('span')[0].onclick=function(){
			panel.changeView(0);
		};*/
	},
	initAction: function(){
	//	this.displayData();
		this.eventBind();
	},
	listeners: {
		boxready: {
			fn: function(){
				this.initAction();
			}
		}
	}
});